<script setup lang="ts">
import { ref, watch } from 'vue'
import { queryLogoutRecord } from '@/api/user'
import { LogoutStatusEnum } from '@/constant/enum'

const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    idCardNo: {
        type: String,
        default: '',
    },
    userName: {
        type: String,
        default: '',
    },
    errorMsg: {
        type: String,
        default: '',
    },
})

const emits = defineEmits(['update:show'])

const visible = ref(false)

function onCloseDialog() {
    visible.value = false
}

async function onLogout() {
    const res = await queryLogoutRecord({ idCardNo: props.idCardNo })
    if (res?.status === LogoutStatusEnum.PROCESS || res?.status === LogoutStatusEnum.FAIL) {
        uni.navigateTo({
            url: `/pages/appeal-status/appeal-status?idCardNo=${props.idCardNo}&status=${res.status}&rejectRemark=${res.rejectRemark}&originPhone=${res.originPhone}`,
        })
    }
    else {
        uni.navigateTo({
            url: `/pages/logout-last/logout-last?idCardNo=${props.idCardNo}`,
        })
    }
}

watch(() => props.show, (val) => {
    visible.value = val
})
watch(visible, (val) => {
    emits('update:show', val)
})
</script>

<template>
    <view v-if="visible" class="fixed left-0 top-0 h-full w-full bg-black bg-op-50">
        <view class="fixed left-1/2 top-1/2 box-border w-665rpx transform rounded-42rpx bg-white px-46rpx py-60rpx -translate-1/2">
            <view class="absolute right-40rpx top-20rpx text-2xl text-gray" @click="onCloseDialog">&times;</view>
            <view class="text-center text-base font-bold">实名认证校对</view>
            <view class="mt-56rpx flex text-32rpx">
                <view class="w-4rem font-bold">姓名</view>
                <view class="text-gray">{{ `${userName.charAt(0)}**` }}</view>
            </view>
            <view class="mt-36rpx flex text-32rpx">
                <view class="w-4rem font-bold">身份证</view>
                <view class="text-gray">{{ `${idCardNo.slice(0, 6)}*********${idCardNo.slice(-3)}` }}</view>
            </view>
            <view class="mb-20rpx mt-50rpx text-28rpx font-bold">温馨提示：</view>
            <view class="text-28rpx text-gray">{{ errorMsg }}</view>
            <view class="mt-60rpx h-94rpx flex items-center justify-center rounded-full bg-orange text-white" @click="onLogout">
                <text>注销上一个账号</text>
            </view>
        </view>
    </view>
</template>

<style scoped>

</style>
